<script lang="ts" setup>
import ImportButton from './ImportButton.vue'
import { useStudentImport } from './composables/useStudentImport'
import { tableProps } from '@/constants/component-props'

const {
  columns,
  students,
  isPending: loading,
  modalVisible,
  toggleVisible,
  preHandleStudents,
  handleUpload
} = useStudentImport()
</script>

<template>
  <ImportButton @students-import="preHandleStudents" />
  <a-modal
    :unmount-on-close="true"
    :modal-style="{ padding: '0', width: '100%', maxWidth: '512px' }"
    :body-style="{ padding: '0 0 1em 0' }"
    :visible="modalVisible"
    @cancel="toggleVisible(false)"
  >
    <template #title>
      <h3 class="text-arco-2 text-base">已解析 {{ students.length }} 条学生记录</h3>
    </template>
    <a-table row-key="username" v-bind="tableProps" size="small" :data="students" :columns>
      <template #th>
        <th class="arco-table-thead py-0" />
      </template>
    </a-table>
    <template #footer>
      <a-button @click="toggleVisible(false)"> 取消 </a-button>
      <a-button type="primary" :loading @click="handleUpload"> 确定 </a-button>
    </template>
  </a-modal>
</template>
